<template>
    <view>
        <view class="main_box">
            <index v-if="currentIndex === 0"></index>
            <HealthCard v-if="currentIndex === 1"></HealthCard>
            <!-- <midBtn v-if="currentIndex === 2"></midBtn> -->
            <PersonalCenter v-if="currentIndex === 2"></PersonalCenter>
        </view>
        <view class="foot_box">
            <!-- //<diy-tabbar :current-page="currentIndex" @changeItem="changeItem"></diy-tabbar> -->
			<u-tabbar :list="tabbar" :mid-button="true" :current-page="currentIndex" @change="changeItem"></u-tabbar>
        </view>
        
    </view>
</template>
 
<script>
    import index  from '@/pages/index/index.vue'
    import HealthCard  from '@/pages/HealthCard/HealthCard'
    import PersonalCenter  from '@/pages/PersonalCenter/PersonalCenter'
	import {
		mapState,
		mapGetters
	} from 'vuex'
    export default {
        components:{
            index,
            HealthCard,
            PersonalCenter
        },
        data() {
            return {
				tabbar:'',
                active:false,
                currentIndex:0
            }
        },
        computed: {
        	...mapState(['token'], ['userInfo','wledge'],['tabList']),
        	...mapGetters(['hasLogin', 'getUserInfo']),
        	
        },
        onShow() {
        	this.tabbar=this.$store.state.tabList
		},
        methods: {
            // 如果
            changeItem(index){
                console.log(index)
                    this.currentIndex = index
            }
        }
    }
</script>
 
<style lang="scss" scoped>
.main_box{
    height: calc(100vh - 110rpx);
    overflow: scroll;
}
.foot_box{
    height: 110rpx;
}
.content {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    /* #ifdef H5 */
    height: calc(100vh - var(--window-bottom) - var(--window-top));
    /* #endif */
    /* #ifndef H5 */
    height: 100vh;
    /* #endif */
    transition: opacity 0.3s;
    background: #999;
    opacity: 0;
    &.active {
        opacity: 1;
    }
    .logo {
        position: relative;
        margin-top: -400upx;
        width: 200upx;
        height: 200upx;
        // z-index: -1;
        opacity: 0;
        transition: opacity 0.3s;
        &.active {
            opacity: 1;
        }
    }
}
.tabbar-box-wrap {
    width: 100%;
    padding: 50upx;
    box-sizing: border-box;
    .tabbar-box {
        display: flex;
        width: 100%;
        background: #fff;
        border-radius: 20upx;
        padding: 15upx 20upx;
        box-sizing: border-box;
        z-index: 2;
        .tabbar-box-item {
            // position: relative;
            width: 100%;
            z-index: 3;
            margin: 10upx;
            color: $uni-color-subtitle;
            text-align: center;
            font-size: $uni-font-size-base;
            .box-image {
                width: 100%;
                height: $uni-img-size-lg;
            }
        }
    }
}
 
.u-popup__content{
    border-radius: 30rpx 30rpx 0 0;
}
</style>